
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>

<!-- <script type="text/javascript" src="js/energize-min.js"></script> -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script> -->
<script src="js/lib/cordova/cordova-2.3.0.js"></script> 
<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9WxyvoqyRoGIAh29QpHVwt_Imr-ofIUU&sensor=false&libraries=drawing">
	
</script>
<script type="text/javascript" src="js/maps.js"></script>
<script type="text/javascript" src="js/directions.js"></script>

<style type="text/css">

.adp-warnbox {
	display: none;
}

.scrollable {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.not_clickable{
	pointer-events: none;
	cursor: default;	
}


.scrollable>* {
	-webkit-transform: translateZ(0px);
}
</style>


</head>

<body>

	<!-- Pagina della mappa -->
	<div id="one" data-role="page" data-theme="b" class="page-map">

		<!-- rightpanel  -->
		<div id="mypanel" data-role="panel" data-position="right"
			data-display="push" data-theme="a" data-dismissible="true"
			class="scrollable" style="height: 100%; position: absolute;"></div>
		<!-- /rightpanel -->

		<!-- header  -->
		<div data-role="header">
			<h1 style="margin-left:10%; margin-right:10%;">Bologna</h1>
		</div>
		<!-- /header  -->
		
		<!-- content  -->
		<div data-role="content" style="padding: 0; top: 7.5%; bottom:15.1%; height:100%; width: 100%; position: absolute;">
			<div id="map_canvas" style="width: 100%; height: 92.5%;"></div>
		</div>
		<!-- /content  -->
		
		<!-- footer  -->
		<div data-role="footer" data-position="fixed">
			<h1>Seleziona un marker sulla mappa!</h1>
			
			<div data-role="navbar">
				<ul>
					<li><a id="take_me_there" href="" data-iconpos="bottom" data-icon="search" class="ui-disabled">Take me there!</a></li>
					<li><a id="view_directions" href="#mypanel" data-iconpos="bottom"  data-icon="info" class="ui-disabled">View directions</a></li>
				</ul>
			</div><!-- /navbar -->
			
		</div>
		<!-- /footer -->

	</div>
	<!-- /page -->


	<script type="text/javascript">
		$(".page-map").live("pagecreate", function() {
			mapBo.init("Gioco");
		});
		$("table.adp-directions").live("click", function() {
			$("#mypanel").panel("close");
		});
		
// 		$(window).resize(function(){
// 			console.log("Resizeeeeeeeeeeeeeeeeeeeeeeeeeeeee!");
// 			google.maps.event.trigger(mapBo.getMap(), 'resize');
// 		});
		
		var supportsOrientationChange = "onorientationchange" in window,
	    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

		window.addEventListener(orientationEvent, function() {
		    //alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
		    console.log(mapBo.getMap());
		    google.maps.event.trigger(mapBo.getMap(), 'resize');
		}, false);
		

// 		//quando si apre il panel delle informazioni sulle direzioni, setto attivo il pulsando info
// 		$( "#mypanel" ).on("beforeopen", function() {
// 			console.log("Pannello aperto.")
// 			$("#view_directions").addClass("ui-btn-active");
// 		});

// 		//quando si chiude il panel delle informazioni sulle direzioni, disattivo il pulsando info
// 		$( "#mypanel" ).on("beforeclose", function() {
// 			console.log("Pannello chiuso.")
// 			$("#view_directions").removeClass("ui-btn-active");
// 		});
		
	</script>

</body>
</html>